<template>
  <div class="wft-advanced-container-contextmenu-panel" :style="panelPositionStyle">
    <div @click="paste">粘贴</div>
    <div @click="clearContainerPanel">清空画板</div>
  </div>
</template>
<script setup lang="ts">
import { getUuid } from 'wft-utils';
import Bus from '@/utils/bus'
import { computed } from 'vue';
import { useMessage } from '@/hooks';

const props = withDefaults(defineProps<{
  top?: number | string,
  bottom?: number | string,
  left?: number | string,
  right?: number | string,
  curComp: TComp,
  curCopyComp?: any,
  id?: string
}>(), {
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
  curCopyComp: null,
  id: ''
})

const panelPositionStyle = computed(() => ({
  top: typeof props.top == 'number' ? props.top + 'px' : props.top,
  bottom: typeof props.bottom == 'number' ? props.bottom + 'px' : props.bottom,
  left: typeof props.left == 'number' ? props.left + 'px' : props.left,
  right: typeof props.right == 'number' ? props.right + 'px' : props.right,
}))

// 粘贴
function paste(event: MouseEvent) {
  if(!props.curCopyComp) return
  if(props.curCopyComp.type == 'advanced') {
    return useMessage().warning('容器控件不可再嵌套高级控件！')
  }
  const pushComp = JSON.parse(JSON.stringify(props.curCopyComp)) as TComp
  const advancedContainerPanel = document.getElementById(props.id)!
  const { left, top, width, height } = advancedContainerPanel.getBoundingClientRect()
  pushComp.style.grid.left = pushComp.style.percent.width == '100%' ? 0 : Math.floor(event.clientX - left)
  pushComp.style.grid.top = event.clientY - top
  pushComp.style.percent.left = ((pushComp.style.grid.left / width) * 100).toFixed(0) + '%'
  pushComp.style.percent.top = ((pushComp.style.grid.top / height) * 100).toFixed(0) + '%'
  pushComp.style.percent.height = ((pushComp.style.grid.height / height) * 100).toFixed(0) + '%'
  if(pushComp.style.percent.width == '100%') {
    pushComp.style.grid.width = parseInt(String(width))
  } else {
    pushComp.style.percent.width = ((pushComp.style.grid.width / width) * 100).toFixed(0) + '%'
  }
  pushComp.id = getUuid()
  pushComp.parentId = props.curComp.id
  pushComp.parentKey = props.curComp.key
  if(pushComp.style.coors) delete pushComp.style.coors
  props.curComp.children?.push(pushComp)
  Bus.emit('addStack')
}

// 清空画板
function clearContainerPanel() {
  props.curComp.children = []
  Bus.emit('addStack')
}

</script>
<style scoped>
.wft-advanced-container-contextmenu-panel {
  width: 150px;
  border: 1px solid #eee;
  border-radius: 3px;
  -webkit-box-shadow:0 0 10px #eee;
  -moz-box-shadow:0 0 10px #eee;
  box-shadow:0 0 10px #eee;
  z-index: 99;
  position: absolute;
  background-color: #fff;
  padding: 5px 0;
}

.wft-advanced-container-contextmenu-panel > div {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  color: #333;
  font-size: 13px;
  padding: 0 12px;
  box-sizing: border-box;
  cursor: pointer;
}
.wft-advanced-container-contextmenu-panel > div:hover {
  background-color: #4393e6;
  color: #fff;
}
</style>
